
<template>
    <div class="normal-container">
        <div v-if="!showAddDetail">
            <div class="normal-text">{{ $route.name }}</div>
            <div class="content-main">
                <section>
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="入库时间">
                            <el-date-picker value-format="yyyy-MM-dd" @change=changeTime v-model="time" type="daterange"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="入库单号">
                            <el-input v-model="formInline.no" placeholder="请输入入库单号" clearable></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="noraml-btn" @click="getList(true)">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="noraml-btn" @click="showAddDetail = true">新增</el-button>
                        </el-form-item>

                    </el-form>
                </section>
                <section>
                    <el-table v-loading="loading" ref="tableMain" :header-cell-style="{
                        'text-align': 'center',
                        background: '#F6F7FB',
                        color: '#4B4B4B',
                        fontSize: '13px',
                    }" :cell-style="{ 'text-align': 'center' }" :data="tableData" style="width: 100%"
                        :max-height="tableHeight">
                        <el-table-column type="index" label="序号" width="50"></el-table-column>
                        <el-table-column prop="no" label="入库单号"></el-table-column>
                        <el-table-column prop="invDate" label="入库时间"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="180">
                            <template slot-scope="scope">
                                <el-tooltip content="详情" placement="top-start" effect="light">
                                    <img @click="clickDetail(scope.row)" src="@/assets/icon/列表icon-详情.png"
                                        style="margin-right: 10px;cursor: pointer;" alt="">
                                </el-tooltip>
                                <el-tooltip content="修改" placement="top-start" effect="light">
                                    <img @click="clickEdit(scope.row)" src="@/assets/icon/列表icon-修改.png"
                                        style="margin-right: 10px;cursor: pointer;" alt="">
                                </el-tooltip>
                                <el-tooltip content="删除" placement="top-start" effect="light">
                                    <img @click="clickDelete(scope.row)" src="@/assets/icon/列表icon-删除.png"
                                        style="margin-right: 10px;cursor: pointer;" alt="">
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                </section>
                <section style="text-align:center;padding-top:20px">
                    <el-pagination background @current-change="handleCurrentChange" :page-size="pageForm.size"
                        :current-page="pageForm.current" layout="prev, pager, next" :total="total">
                    </el-pagination>
                </section>
            </div>
        </div>
        <detailPage v-if="showDetailPage" :showDetailPage="showDetailPage" @closeDetailPage="showDetailPage = false"
            :item="item">
        </detailPage>
        <addPage v-if="showAddDetail" :showAddDetail="showAddDetail" @closeformCollect="closeformCollect" :item="item">
        </addPage>
        <!-- <addDialog v-if="showDetail" :showDetail="showDetail" @closeDetail="closeDetail" :id="id"></addDialog> -->
    </div>
</template>
  
<script>
import detailPage from './components/detailPage';
import addPage from './components/addPage';
export default {
    components: { detailPage, addPage },
    data() {
        return {
            item: '',
            time: [],
            showAddDetail: false,
            showDetailPage: false,
            showDetail: false,
            total: 0,
            loading: false,
            formInline: {
                startDate: '',
                endDate: '',
                no: '',
                type: 1
            },
            pageForm: {
                current: 1,
                size: 20
            },
            tableData: [],
            id: "",
            tableHeight: 500,
            no: ''

        }
    },
    mounted() {

        this.$nextTick(res => {
            const tableHeight = document.documentElement.clientHeight;
            const topHeight = this.$refs.tableMain.$el.getBoundingClientRect().top + 115;
            this.tableHeight = tableHeight - topHeight;
        })
        this.getList();
    },
    computed: {
        listenHeight() {
            return this.$store.state.user.heightSize
        }
    },
    watch: {
        listenHeight(val) {
            if (!this.showAddDetail) {
                const tableHeight = document.documentElement.clientHeight;
                const topHeight = this.$refs.tableMain.$el.getBoundingClientRect().top + 115;
                this.tableHeight = tableHeight - topHeight;
            }

        }
    },
    methods: {
        closeformCollect(e) {
            if (e) this.getList(true);
            this.item = '';
            this.showAddDetail = false;
        },
        changeTime(e) {
            this.formInline.startDate = e ? e[0] : '';
            this.formInline.endDate = e ? e[0] : '';
        },
        clickDelete(item) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$baseRequest('/spar/stock-record/delete/' + item.no, {}, {}, 'delete').then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getList();
                })
            })
        },
        clickDetail(item) {
            this.item = item;
            this.showDetailPage = true;
        },
        clickEdit(item) {
            this.item = item;
            this.showAddDetail = true;
        },
        getList(isClear) {
            this.loading = true;
            if (isClear) this.pageForm.current = 1; // 点击搜索
            this.$baseRequest("/spar/stock-record/pageList", this.formInline, this.pageForm, "post").then(
                (res) => {
                    this.tableData = res.data.records;
                    this.total = Number(res.data.totalRow);
                    this.loading = false;
                }
            ).catch(res => {
                this.loading = false;
            })
        },
        handleCurrentChange(val) {
            this.pageForm.current = val;
            this.getList();
        },
    }
}
</script>
  
<style lang="scss" scoped>
.content-main {
    border: 1px solid #DFE2E8;
    padding: 30px;
    background-color: #fff;
}
</style>
  